<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/lib/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/lib/swiper/package/swiper-bundle.css">
    <link rel="stylesheet" href="/css/details.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>Document</title>
</head>
<body>
    <!-- 头部 -->
    <header>
      
    </header>
    <!-- 中部 -->
    <main class="container-fluid">
       
    </main>
    <script type="text/html" id="prodDetailTemplate">
        <div class="product container-fluid">
            <div class="product-buy clearfix container">
                <!-- 左侧 -->
                <div class="preview-wrap">
                    <div class="preview">
                        <!-- 放大镜 -->
                        <div class="zoom">
                            <img src="{{photo[0].url}}" alt="" class="zoom-image">
                        </div>
                    </div>
                    <div class="thumbs clearfix">
                        <a href="javascript:;" class="btn btn-prev"></a>
                        <a href="javascript:;" class="btn btn-next"></a>
                        <div class="thumbslist-wrap">
                            <ul class="thumbslist clearfix" id="thumbslist">
                                {{each photo item}}
                                    <li>
                                        <a href="#" data-image="{{item.url}}" data-zoom-image="{{item.url}}">
                                            <img src="{{item.url}}" alt="">
                                        </a>
                                    </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 商品介绍 -->
                <div class="introinfo">
                    <p class="title clearfix">
                        <span class="cn">{{title}}</span>
                    </p>
                    <div class="specific-wrap">
                        <div class="weight clearfix section">
                            <div class="title">身高</div>
                            <div class="weight-info content">
                                <span class="spec active">160</span>
                                <span class="spec">170</span>
                                <span class="spec">180</span>
                                <span class="spec">190</span>
                            </div>
                        </div>
                        <div class="size clearfix section">
                            <div class="title">款项</div>
                            <ul class="content">
                                <li class="regular clearfix">
                                    <span class="price">¥ <i id="price">{{price}}</i></span>
                                    <span class="name">常规款</span>
                                    <span class="radio"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <ul class="tips clearfix">  
                        <li>
                            <p id="guige">正品保证</p>
                        </li>
                        <li>
                            <p id="canju">极速退款</p>
                        </li>
                        <li>
                            <p id="qie">退货运费险</p>
                        </li>
                        <li>
                            <p id="tiqian">七天无理由退换</p>
                        </li>
                    </ul>
                    <!-- 加减数量 -->
                    <div class="amount clearfix">
                        <div class="title">数量</div>
                        <div class="content clearfix delievent">
                            <a href="javascript:;" class="btn btn-sub disabled"></a>
                            <div class="amount-wrap">
                                <input type="text" class="txt-amount" value="2">
                            </div>
                            <a href="javascript:;" class="btn btn-add"></a>
                        </div>
                    </div>
                    <!-- 操作 -->
                    <div class="operates clearfix">
                        <a href="javascript:;" class="btn favor">
                            <span class="img"></span>
                            <span class="txt">喜欢</span>
                        </a>
                        <a href="javascript:;" class="btn add-basket">放入购物篮</a>
                        <a href="/html/shoppingcart.html" class="btn buy-immediate">立即购买</a>
                    </div>
                </div>
            </div>

            <!-- 商品详细描述 -->
            <div class="product-detail container">
                <div class="header clearfix">
                    <a href="#" class="active">商品详情</a>
                </div>
                <div class="content-wrap">
                    <div class="desContent">
                        {{each descContentList item}}
                            <img src="{{item.image.url}}" />
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>
    </script>
    <!-- 底部 -->
    <footer>
        
    </footer>
    <!-- 加入成功 -->
    <di class="tip">
        已加入购物车
    </di>

    <script src="/lib/require/require.js" data-main="/js/details"></script>
    <script src="/lib/swiper/package/swiper-bundle.js"></script>
</body>
</html>